<script lang="ts" setup>
const props = defineProps({
  value: {
    type: String,
    default: 'home',
  },
})
const { value } = toRefs(props)

function tabChange({ value }: { value: string }) {
  uni.switchTab({
    url: `/pages/${value}/index`,
  })
}
uni.hideTabBar()
</script>

<template>
  <wd-tabbar :model-value="value" safe-area-inset-bottom fixed @change="tabChange">
    <wd-tabbar-item title="首页" icon="home" name="home" />
    <wd-tabbar-item title="报表" name="report" icon="i-carbon-report">
      <template #icon="{ active }">
        <view class="i-carbon-report" :class="{ 'is-active': active }" />
      </template>
    </wd-tabbar-item>
    <!--    <wd-tabbar-item title="智慧餐厅" icon="i-icon-park-outline-shop" name="restaurant"> -->
    <!--      <template #icon="{ active }"> -->
    <!--        <view class="i-icon-park-outline-shop" :class="{ 'is-active': active }" /> -->
    <!--      </template> -->
    <!--    </wd-tabbar-item> -->
    <wd-tabbar-item title="工作台" icon="i-icon-park-outline-workbench" name="workbench">
      <template #icon="{ active }">
        <view class="i-icon-park-outline-workbench" :class="{ 'is-active': active }" />
      </template>
    </wd-tabbar-item>
    <wd-tabbar-item title="我的" icon="user" name="mine" />
  </wd-tabbar>
</template>
